@commoncolor:#fcac45;

// 混合器

.sidemt{
    padding-top: 103px;
}
.widthcenter{
    width: 100%;
    text-align: left;
}
// 混合器end



.box{
    height: 100vh;
    width: 100%;
    background-color: #111111;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    h1{
        color: #999999;
        font-size: 44px;

        span{
            color: @commoncolor;
        }
    }

    p {
        color: white;
        font-size: 20px;

        img{
            margin-top: 280px;
        }
    }
}

.leftsize{
    .sidemt()
}
.rightsize{
    .sidemt();

    h3{
        font-size: 20px;
        color: #636363;
    }

    h2{
        color: #222;
        font-size: 34px;
        line-height: 64px;

        span{
            border-bottom: 3px solid @commoncolor;
        }
    }

    p{
        color: #6c6c6c;
        font-size: 18px;
        line-height: 26px;
        margin-top: 31px;
    }

    >ul{
        >li{
            line-height: 34px;

            >img{
                margin-right: 10px;
            }

            >span{
                font-size: 18px;
                color: #5a5a5a;
                font-weight: bold;
            }
        }
    }

    button{
        margin-top: 53px;
        width: 194px;
        height: 47px;

        img{
            margin-left: 0;
            margin-right: 10px;
        }
    }
}


/* 公用样式 */
.title-h2{
    font-size: 44px;
    margin-top: 100px;

    span{
        font-weight: bold;
     }
}
.title-hr-l{
    width: 99px;
    height: 3px;
    background-color: #fcac45;
    border: none;
    margin: 7px auto;
}
.title-hr-s{
    width: 67px;
    height: 3px;
    background-color: #fdc57c;
    border: none;
    margin: 7px auto;
}
.spot{
    width: 53px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 73px auto 84px auto;

    li{
        width: 9px;
        height: 9px;
        background-color: #fff;

        &:first-child{
            background-color:@commoncolor;
        }
    }
}
.teamlist {
    margin-top: 92px;
    text-align: center;

    li{
        margin-top: 20px;
        @media (min-width: 1200px){
            margin-top: 0;
        }

        img{
            margin: 0 auto;
            float: left;

            @media (min-width: 768px){
                float: none;
            }
        }

        h3{
            font-size: 20px;
            margin-top: 22px;
            font-weight: bold;
        }

        p {
            font-size: 14px;
            line-height: 21px;
            margin-top: 34px;
        } 
    }
}
.paragraph{
    margin-top: 40px;
    margin-bottom: 128px;
    font-size: 16px;
    color: #6c6c6c;
}
.tag{
    font-size: 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;

    p{
        text-indent: 7px;
        width: 100%;
        text-align: left;
        @media (min-width: 992px){
            width: 50%;
        }
    }

    ul{
        font-size: 1rem;
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        text-align: right;
        @media (min-width: 992px){
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        li{
            color: #6c6c6c;
            margin: 0 7px;

            .bold{
                color: #222222;
                font-weight: bold;
            }
        }
    }
}
.imgbox{
    margin-top: 40px;
    margin-bottom: 100px;

    li{
        .imglist{
            overflow: hidden;
            position: relative;
            margin: 10px auto;

            &:hover .Curtain{
                transform: translateY(0);
            }

            >img{
                width: 100%;
            }
        }
    }
}
.Curtain{
    transform: translateY(-100%);
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 20px;
    color: #fff;
    background-color: #222222;
    padding-top: 67px;
    padding-bottom: 59px;
    transition: all 0.3s;

    p{
        margin-top: 12px;
        font-size: 14px;
        color: #b2b2b2;
    }

    img{
        margin-top: 28px;
    }
}

/* 公用end */




.team{
    background-color: #070707;
    color: #fff;
    text-align: center;
}
.services{
    text-align: center;

    .teamlist{
        margin-bottom: 100px;

        h3{
            font-size: 25px;
            color: #222222;
            font-weight: bold;
            margin-top: 29px;
            margin-bottom: 20px;
        }

        .imgbox{
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            width: 125px;
            height: 125px;
            border-radius: 50%;
            border: 6px solid #fcac45;
        }
    }
}
.clients{
    text-align: center;
    background-color: #0b0b0b;
    color: white;

    .logobox{
        margin-top: 94px;

        img{
            margin:0 28px 0 28px;
        }
    }
}
.work{
    text-align: center;
}
.testimonials{
    background-color: black;
    text-align: center;
    color: #fff;

    .paragraph{
        margin-bottom: 50px;
        font-weight: bold;
        font-size: 18px;
        color: #e7e7e7;
    }

    .dean{
        font-size: 18px;
        color: #b2b2b2;

        span{
            font-weight: bold;
        }
    }
}
.contact{
    text-align: center;

    .text{
        text-align: center;
        width: 50%;
        margin:0 auto;
        margin-top: 42px;
        margin-bottom: 47px;
        font-size: 16px;
        color: #6c6c6c;
    }

    .information{
        margin-top: 47px;
        width: 50%;
        margin: 0 auto;

        p{
            color: #636363;
            margin-bottom: 10px;

            span{
                color: #db0000;
            }
        }

        .info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 31px;

            input{
                width: 100%;
                height: 42px;
             }

            .name{
                .widthcenter();
                @media (min-width: 768px){
                    width:48%
                }
            }

            .email{
                .widthcenter();
                @media (min-width: 768px){
                    width:48%
                }
            }
         }

        .message{
            text-align: left;

            textarea{
                width: 100%;
                height: 163px;
            }
        }

        .send{
            text-align: right;
            margin-top: 31px;

            input{
                width: 166px;
                height: 40px;
                color: #fff;
                background-color: #fcac45;
                border: none;
                margin-bottom: 102px;
            }
        }
    }
}

